<%--
  Created by IntelliJ IDEA.
  User: caidao
  Date: 2023/4/23
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>消费记录 - 编辑</title>
    <jsp:include page="/include/bootstrapHeader.jsp"/>
    <link rel="stylesheet" href="<c:url value="/css/main.css"/>">
</head>
<body class="d-flex flex-column h-100">
    <jsp:include page="/include/header.jsp"/>
    <main class="flex-shrink-0">
        <div class="container">
            <h1 class="mt-5">记录每天的消费情况</h1>
            <form class="row g-3 needs-validation" novalidate action="<c:url value="/paid/create"/>" method="post">
                <div class="col-6">
                    <label for="paidName" class="form-label">商品名称</label>
                    <input type="text" class="form-control" id="paidName" name="paidName" value="<c:out value="${model.paidName}"/>" required>
                    <div class="valid-feedback">
                        验证通过
                    </div>
                    <div class="invalid-feedback">
                        商品名称必填，只能使用中文
                    </div>
                </div>
                <div class="col-6">
                    <label for="paidType" class="form-label">支出类型</label>
                    <select id="paidType" name="paidType" class="form-control" required>
                        <option selected disabled value="">请选择...</option>
                        <c:forEach var="paidType" items="${paidTypes}">
                            <option
                                    value="<c:out value="${paidType.typeName}"/>"
                                    <c:if test="${model.paidType == paidType.typeName}">selected</c:if>><c:out value="${paidType.typeName}"/>
                            </option>
                        </c:forEach>
                    </select>
                    <div class="invalid-feedback">
                        支出类型必填
                    </div>
                </div>
                <div class="col-6">
                    <label for="paidDate" class="form-label">支出时间</label>
                    <div class="input-group has-validation">
                        <input type="datetime-local" class="form-control" id="paidDate" name="paidDate" value="<fmt:formatDate value="${model.paidDate}" pattern="yyyy-MM-dd'T'00:00"/>" required>
                        <div class="invalid-feedback">
                            支出时间必填
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <label for="amountPaid" class="form-label">支出金额</label>
                    <input type="number" class="form-control" id="amountPaid" name="amountPaid" step="0.50" min="0.50" max="1000" value="<c:out value="${model.amountPaid}"/>" required>
                    <div class="invalid-feedback">
                        支出金额范围：0.50 - 1000.00
                    </div>
                </div>
                <div class="col-6">
                    <label for="remark" class="form-label">备注</label>
                    <input type="text" class="form-control" id="remark" name="remark" value="<c:out value="${model.remark}"/>">
                </div>
                <div class="col-12">
                    <button class="btn btn-primary" type="submit">提交</button>
                    <a href="<c:url value="/paid/list"/>" class="btn btn-secondary">取消</a>
                </div>
                <script>
                    // Example starter JavaScript for disabling form submissions if there are invalid fields
                    (() => {
                        'use strict'

                        // Fetch all the forms we want to apply custom Bootstrap validation styles to
                        const forms = document.querySelectorAll('.needs-validation')

                        // Loop over them and prevent submission
                        Array.from(forms).forEach(form => {
                            form.addEventListener('submit', event => {
                                if (!form.checkValidity()) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }

                                form.classList.add('was-validated')
                            }, false)
                        })
                    })()
                </script>
            </form>
        </div>
    </main>
    <jsp:include page="/include/footer.jsp"/>
</body>
</html>
